<template>
  <el-select
    :value="value"
    filterable
    remote
    :disabled="disabled"
    :multiple="limit"
    @focus="remoteMethod(null)"
    @change="onChange"
    :remote-method="remoteMethod"
    :loading="loading"
    style="width: 100%"
    placeholder="请输入项目名称">
    <el-option
      v-for="item in options"
      :key="item.id"
      :value="item.id"
      :label="item.name"></el-option>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-select>
</template>

<script>
export default {
  name: "ProjectNameInput",
  /*unStart是用于判断是否为项目已开始*/
  /*limit是用于判断是否为项目多选限制*/
  props: ["value", "limit", "customOptions", "disabled", "unStart"],
  data() {
    return {
      options: [],
      loading: false,
      plan_work_hour: 0,
    }
  },
  watch: {
    customOptions(current) {
      this.options = current
    },
  },
  methods: {
    remoteMethod(queryString) {
      this.loading = true
      this.$http.get('/projects', {
        params: {
          name: queryString,
          limit: 10,
          status: this.unStart ? '' : "started"
        }
      }).then(res => {
        this.loading = false
        if (res.data.code === 0) {
          this.options = res.data.data.map(item => ({
            name: item.name,
            id: item.id,
            plan_work_hour: item.plan_work_hour
          }))
        }
        // this.options = res.data.data.map(item => ({name: item.name, id: item.id}))

        else
          this.$message.error(res.data.msg)
      })
    },
    onChange(val) {
      if (this.options.filter(item => item.id === val).length) {
        this.plan_work_hour = this.options.filter(item => item.id === val)[0].plan_work_hour
      }
      this.$emit('input', val)
      this.$emit('onProjectSelect', this.plan_work_hour)
    }
  }
}
</script>

<style scoped>

</style>
